
// 首页业务

// 渲染用户名
renderUser()

// 调用鉴权函数
checkLogin()

// 退出登录
logout()


// 渲染统计数据
async function getData() {
    const { data: {
        groupData, overview, year, salaryData, provinceData
    } } = await axios.get('/dashboard')

    // 调用函数 渲染概览数据
    renderOverview(overview)
    // 调用函数 渲染薪资走势
    renderYearSalary(year)
    // 调用函数 渲染薪资分布
    renderSalary(salaryData)
    // 调用函数 渲染分组数据
    renderGroup(groupData)
    // 调用函数 渲染男女薪资
    renderGenderData(salaryData)
    // 调用函数 渲染籍贯
    renderProvince(provinceData)
}
getData()

// 1.概览业务 - overview
function renderOverview(overview) {
    Object.keys(overview).forEach((key) => {
        document.querySelector(`.${key}`).innerHTML = overview[key]
    })
}

// 2.薪资走势 - year
function renderYearSalary(year) {
    // 初始化echarts实例
    const myChart = echarts.init(document.querySelector('#line'))
    // 设置配置项
    const option = {
        // 标题
        title: {
            text: '2024全学科薪资走势',
            left: 13,
            top: 10,
            textStyle: {
                // color: '#999',
                fontSize: 16
            }
        },
        // x轴配置
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: year.map(item => item.month),
            axisLine: {
                lineStyle: {
                    color: '#999',
                    type: 'dashed'
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                }
            }
        },
        // 系列图表配置
        series: [
            {
                data: year.map(item => item.salary),
                type: 'line',
                // 区域样式
                areaStyle: {
                    color: {
                        // 图表的样式 折线/饼图/柱状图
                        type: 'linear',
                        // x y 渐变起始点
                        x: 0,
                        y: 0,
                        // x2 控制水平方向的渐变 y2 控制垂直方向的渐变
                        x2: 0,
                        y2: 1,
                        // 渐变颜色
                        colorStops: [{
                            offset: 0, color: '#c0def7' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#e6f1fc' // 100% 处的颜色
                        }],
                    }
                },
                smooth: true,
                // 标记的大小
                symbolSize: 8,
                // 线条样式
                lineStyle: {
                    width: 6,
                    color: {
                        // 图表的样式 折线/饼图/柱状图
                        type: 'linear',
                        // x y 渐变起始点
                        x: 0,
                        y: 0,
                        // x2 控制水平方向的渐变 y2 控制垂直方向的渐变
                        x2: 1,
                        y2: 0,
                        // 渐变颜色
                        colorStops: [{
                            offset: 0, color: '#4a9eea' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#5f7ceb' // 100% 处的颜色
                        }],
                    }
                }
            }
        ]
    };
    // 使用配置项,显示图表
    myChart.setOption(option)
}

// 3.薪资分布 - salaryData
function renderSalary(salaryData) {
    // 实例化echarts
    const myChart = echarts.init(document.querySelector('#salary'))
    // 设置配置项目
    const option = {
        title: {
            text: '班级薪资分布',
            left: 10,
            top: 10
        },
        // 提示组件
        tooltip: {
            trigger: 'item',
            // data是提示内容
            data: ['班级薪资分布']
        },
        // 图例组件
        legend: {
            bottom: '5%',
            left: 'center'
        },
        series: [
            {
                // 和提示组件中data的值保持一致
                name: '班级薪资分布',
                type: 'pie',
                radius: ['50%', '60%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },

                labelLine: {
                    show: false
                },
                data: salaryData.map(item => {
                    return { value: item.g_count + item.b_count, name: item.label }
                })
                // [
                //     { value: 1048, name: 'Search Engine' },
                //     { value: 735, name: 'Direct' },
                //     { value: 580, name: 'Email' },
                //     { value: 484, name: 'Union Ads' },
                // ]
            }
        ],
        // 设置图表的颜色 数组中的颜色设置顺序 是顺时针
        color: ['#f0a645', '#6295f8', '#63b9f4', '#6ad09e']
    };
    // 拿到配置项 显示图表
    myChart.setOption(option)
}

// 4.分组数据 - groupData
function renderGroup(groupData) {
    // 获取到第一组的数据
    // const obj = {
    //     '1': ['1'],
    //     '2': { age: 18 }
    // }
    // console.log(obj[2])
    // console.log(groupData[2])
    const myChart = echarts.init(document.querySelector('#lines'))
    // 配置项
    const option = {
        xAxis: {
            type: 'category',
            // 学生姓名
            data: groupData[1].map(item => item.name),
            axisLine: {
                lineStyle: {
                    color: '#999',
                    type: 'dashed'
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        series: [
            {
                // 期望薪资
                data: groupData[1].map(item => item.hope_salary),
                type: 'bar',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#70d2a2' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#ccefde' // 100% 处的颜色
                        }],

                    }
                }
            },
            {
                // 实际薪资
                data: groupData[1].map(item => item.salary),
                type: 'bar',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#6faff9' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#d2e3f8' // 100% 处的颜色
                        }],

                    }
                }
            }
        ]
    };
    myChart.setOption(option)

    // 点击切换分组数据
    const btns = document.querySelector('#btns')
    btns.addEventListener('click', function (e) {
        // console.log(111)
        // 确定触发事件的事件源
        if (e.target.classList.contains('btn')) {
            // console.log(e.target)
            // 高亮切换
            // 删除类 btn-blue
            document.querySelector('.btn-blue').classList.remove('btn-blue')
            // 添加类 btn-blue
            e.target.classList.add('btn-blue')

            // 点击不同的组,显示不同的数据
            // 展示不同分组数据 -> 核心是要修改什么? -> 
            // option内的配置(索引) 
            // 1. xAxis轴中的data值 2. series中对象内data的值
            const index = e.target.innerHTML
            // console.log(groupData[index])
            // 给option内的配置项 更换数据
            option.xAxis.data = groupData[index].map(item => item.name)
            option.series[0].data = groupData[index].map(item => item.hope_salary)
            option.series[1].data = groupData[index].map(item => item.salary)
            // 重新设置配置项,显示图表
            myChart.setOption(option)
        }
    })
}
// 5.男女薪资分布 - 
function renderGenderData(salary) {
    const myChart = echarts.init(document.querySelector('#gender'))

    // const datas = [
    //     [
    //         { name: '圣彼得堡来客', value: 5.6 },
    //         { name: '陀思妥耶夫斯基全集', value: 1 },
    //         { name: '史记精注全译（全6册）', value: 0.8 },
    //         { name: '加德纳艺术通史', value: 0.5 }
    //     ],
    //     [
    //         { name: '银河帝国5：迈向基地', value: 3.8 },
    //         { name: '俞军产品方法论', value: 2.3 },
    //         { name: '艺术的逃难', value: 2.2 },
    //         { name: '第一次世界大战回忆录（全五卷）', value: 1.3 },
    //     ],

    // ];
    const datas = [
        salary.map(item => {
            return { name: item.label, value: item.b_count }
        }),
        salary.map(item => {
            return { name: item.label, value: item.g_count }
        }),
    ]
    const option = {
        title: [
            {
                text: '男女薪资分布',
                left: 10,
                top: 10,
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 16
                }
            },
            {
                text: '男生',
                left: 'center',
                top: '45%',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 14
                }
            }
            ,
            {
                text: '女生',
                left: 'center',
                bottom: '5%',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 14
                }
            },
        ],
        tooltip: {
            trigger: 'item'
        },
        series: datas.map(function (data, idx) {
            var top = idx * 40 + 10;
            return {
                type: 'pie',
                radius: [45, 60],
                top: top + '%',
                height: '33.33%',
                left: 'center',
                width: 400,
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                data: data,
                color: ['#f2a33a', '#5198f7', '#56bdf7', '#62d499']
            };
        })
    };

    myChart.setOption(option)
}

// 6.籍贯分布 - provinceData
function renderProvince(mapData) {
    const myChart = echarts.init(document.querySelector('#map'))
    // 因为所有的省份都要存在
    // 后台返回的数据是, 有学生个数的的省份
    // 后期拿到返回的数据,要把学生的个数给datalist中的value
    // 学生个数在返回的数据中 value里面 -> 把后台value值给datalist的value
    const dataList = [
        { name: '南海诸岛', value: 0 },
        { name: '北京', value: 0 },
        { name: '天津', value: 0 },
        { name: '上海', value: 0 },
        { name: '重庆', value: 0 },
        { name: '河北', value: 0 },
        { name: '河南', value: 0 },
        { name: '云南', value: 0 },
        { name: '辽宁', value: 0 },
        { name: '黑龙江', value: 0 },
        { name: '湖南', value: 0 },
        { name: '安徽', value: 0 },
        { name: '山东', value: 0 },
        { name: '新疆', value: 0 },
        { name: '江苏', value: 0 },
        { name: '浙江', value: 0 },
        { name: '江西', value: 0 },
        { name: '湖北', value: 0 },
        { name: '广西', value: 0 },
        { name: '甘肃', value: 0 },
        { name: '山西', value: 0 },
        { name: '内蒙古', value: 0 },
        { name: '陕西', value: 0 },
        { name: '吉林', value: 0 },
        { name: '福建', value: 0 },
        { name: '贵州', value: 0 },
        { name: '广东', value: 0 },
        { name: '青海', value: 0 },
        { name: '西藏', value: 0 },
        { name: '四川', value: 0 },
        { name: '宁夏', value: 0 },
        { name: '海南', value: 0 },
        { name: '台湾', value: 0 },
        { name: '香港', value: 0 },
        { name: '澳门', value: 0 },
    ]
    // 1. 将所有有学生数据的省份找出来
    dataList.forEach(item => {
        // console.log(item)
        // find 找数组元素 如果能找到返回该数组元素 找不到undefined
        // ele 数组元素 {name:'河南省',value:4}
        // ele.name '河南省' ....  后台数据
        // includes 判断是否包含某个字符 包含是true 不包含false
        // item.name '河南' '安徽'..... '海南' datalist
        const res = mapData.find(ele => ele.name.includes(item.name))
        // console.log(res)
        if (res) {
            // 2. 拿后台返回的value值给datalist中的value
            item.value = res.value
        }
    })
    const option = {
        title: {
            text: '籍贯分布',
            top: 10,
            left: 10,
            textStyle: {
                fontSize: 16,
            },
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} 位学员',
            borderColor: 'transparent',
            backgroundColor: 'rgba(0,0,0,0.5)',
            textStyle: {
                color: '#fff',
            },
        },
        visualMap: {
            min: 0,
            max: 6,
            left: 'left',
            bottom: '20',
            text: ['6', '0'],
            inRange: {
                color: ['#ffffff', '#0075F0'],
            },
            show: true,
            left: 40,
        },
        geo: {
            map: 'china',
            roam: false,
            zoom: 1.0,
            label: {
                normal: {
                    show: true,
                    fontSize: '10',
                    color: 'rgba(0,0,0,0.7)',
                },
            },
            itemStyle: {
                normal: {
                    borderColor: 'rgba(0, 0, 0, 0.2)',
                    color: '#e0ffff',
                },
                emphasis: {
                    areaColor: '#34D39A',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
            },
        },
        series: [
            {
                name: '籍贯分布',
                type: 'map',
                geoIndex: 0,
                data: dataList,
            },
        ],
    }
    myChart.setOption(option)
}























// // 渲染统计数据
// async function getData() {
//     const token = localStorage.getItem('token')
//     const { data: {
//         groupData, overview, year, salaryData, provinceData
//     } } = await axios.get('/dashboard')
// const { data: { data: {
//     groupData, overview, year, salaryData, provinceData
// } } } = await axios({
//     url: '/dashboard',
//     // 请求需要携带token才能拿到数据
//     // headers: {
//     //     Authorization: token
//     // }
// })

// document.querySelector('.salary').innerHTML = overview.salary
// document.querySelector('.student_count').innerHTML = overview.student_count
// document.querySelector('.age').innerHTML = overview.age
// document.querySelector('.group_count').innerHTML = overview.grounp_count

// 拿到对象中的属性名放到数组中
// console.log(Object.keys(overview))

//     Object.keys(overview).forEach((key) => {
//         document.querySelector(`.${key}`).innerHTML = overview[key]
//     })
// }
// getData()